<template>
     <div class="grade-box">
          <div>
               <heade-return :title-params="topname"></heade-return>
               <div style="padding: 0 14px">
                      <div class="grade-list">
                            <h6>当前用户等级: &nbsp</h6>
                            <span>
                                 {{vipName}}
                                 <!-- <img src="../../assets/img/point@2x.png">  -->
                            </span>
                       </div>
                        <!-- <ul class="grade-list-li">
                             <li>等级</li>
                             <li>升级条件</li>
                             <li>可盖楼数量</li>
                             <li>返佣+直推+间推</li>
                             <li>VIP <img src="../../assets/img/VIP@2x.png"></li>
                             <li>????</li>
                             <li>???</li>
                             <li>合伙人 <img src="../../assets/img/partner1@2x.png"></li>
                             <li>????</li>
                             <li>???</li>
                             <li>高级合伙人 <img src="../../assets/img/partner1@2x.png"></li>
                             <li>????</li>
                             <li>???</li>
                        </ul> -->
                        <ul class="grade-list-li" v-if="userGradeList.length>0">
                             <li style="border-top:none;">
                                  <span style="width:20%;">等级</span>
                                  <span style="width:38%;">升级条件</span>
                                  <span style="width:38%;border-right: none;">返佣+直推+间推</span>
                             </li>
                             <li v-for="val in userGradeList" style="border-top: none;">
                                  <span style="width:20%;">{{val.val1}}</span>
                                  <span style="width:38%;color:#333;font-weight: 400;">{{val.val2}}</span>
                                  <span style="width:38%;color:#333;font-weight: 400;border-right: none;">{{val.val4}}</span>
                             </li>
                        </ul>
                       <p class="grade-status">升级状态:</p>
                    <div class="grade-invatation">
                         <p>有效邀请人数</p>
                         <span>{{inivate_number}}/{{inviteNumber}}</span>
                         <div class="grade-progress"><van-progress
                                 stroke-width="10"
                                 :percentage="inivate_number"
                                 :show-pivot="false"
                                 color="linear-gradient(to right, #FF5AA0, #FF5AA0)"/></div>
                    </div>
                    <div class="grade-invatationm">
                         <p>已获取收益</p>
                         <span>{{profit}}/{{inviteProfit}}</span>
                         <div class="grade-progress"><van-progress
                                 stroke-width="10"
                                 :percentage="profit"
                                 :show-pivot="false"
                                 color="linear-gradient(to right, #FFD13F, #FFD13F)"/></div>
                    </div>
                    <p class="grade-status">说明:</p>
                    <h2>有效的标准至少有一个已完成的订单；</h2>
                    <h2>返佣指的是自购或者分享时的佣金；</h2>
                    <h2>直推和间推是下级佣金收益的抽成。</h2>
               </div>
               <div class="grade-btn" @click="invatation()">
                    邀请
               </div>
          </div>
          <div style="position: relative;z-index: 80">
               <van-popup v-model="show" round position="bottom" :style="{ height: '160px'  }" >
                   <h1>邀请好友加入淘金客</h1>
                   <!-- <share style="width: 100%;height: 100px;" :config="config"></share> -->
                   <!-- <div class="social-share" data-initialized="true">
                       <a href="#" class="social-share-icon icon-wechat"></a>
                       <a href="#" class="social-share-icon icon-qq"></a>
                       <a href="#" class="social-share-icon icon-qzone"></a>
                   </div> -->
                   <!-- <div class="social-share" data-wechat-qrcode-title="请打开微信扫一扫"></div> -->
                   <ul class="invitation-shear">
                       <li @click="wechatFen(0,'weixin')">
                           <img src="../../assets/img/share-icon-wechat@2x.png" alt="">
                           <p>微信好友</p>
                       </li>
                       <li @click="wechatFen(1,'weixin')">
                           <img src="../../assets/img/share-icon-circle@2x.png" alt="">
                           <p>朋友圈</p>
                       </li>
                       <!-- <li @click="wechatFen(1,'qq')">
                           <img src="../../assets/img/share-icon-qq@2x.png" alt="">
                           <p>QQ</p>
                       </li> -->
                       <li @click="saveImg">
                           <img src="../../assets/img/share-icon-download@2x.png" alt="">
                           <p>保存到本地</p>
                       </li>
                   </ul>
               </van-popup>
          </div>
          <div v-show="show" class="haibao" ref="imageTofiles">
               <div style="width:100%;height: 500px;padding:10px;background-color: #2E9BFB;border-radius: 10px;">
                    <img style="width: 94%;height: 371px;margin-left: 3%;" src="../../assets/img/inter.png" alt="">
                </div>
               <div style="position: absolute;bottom: 16px;left: calc(3% + 10px);background-color: #fff;padding: 4px;">
                    <div id="qrcode"></div>
                </div>
                <div style="position: absolute;bottom: 20px;left: calc(3% + 155px);width: 108px;color:#fff;">
                    <div style="margin-bottom: 6px;">注册【神器口袋】</div>
                    <div style="margin-bottom: 16px;">开银行 赚大钱</div>
                    <div style="font-weight: bold;">邀请码 {{userCode}}</div>
                </div>
          </div>
          <div style="position: fixed;z-index:100000;top:0;width:100%;height: 100vh;background-color: rgba(0,0,0,.5);" v-if="showLoading">
               <div style="width:100%;text-align: center;color:#fff;position: relative;top:44vh;">
                   <span v-if="shareShow">正在生成分享</span>
                   <span v-else>正在保存</span>
               </div>
               <van-loading style="margin-top:46vh;margin-left:calc(50% - 15px)" color="#ff2e67" />
           </div>
     </div>
</template>
<script>
     import { Toast,Loading  } from 'vant'
    import headeReturn from "../public/head"
    export default {
        name: "usergrade",
         components:{
             headeReturn,
             [Loading.name]:Loading
         },
         data(){
             return{
                  topname:'用户等级',
                  show: false,
                  userName:'',
                  userCode:'',
                  userAvater:'',
                  userId:'',
                  userGradeList:[
                       {val1:'VIP会员',val2:'免费赠送',val3:'3',val4:'60%+6%+0%'},
                       {val1:'合伙人',val2:'有效邀请30人 或 累计获取收益100元',val3:'6',val4:'70%+7%+1%'},
                       {val1:'高级合伙人',val2:'有效邀请100人 或 累计获取收益500元',val3:'9',val4:'80%+8%+2%'},
                  ],
                  inivate_number:0,
                  vipName:'',
                  profit:0,
                  inviteProfit:0,
                  inviteNumber:0,
                  showLoading:false,
                  shareShow:true
             }

         },
         mounted() {
              this.userId = localStorage.getItem('user_id');
              this.initData();
         },
         methods:{
               initData(){
                    this.$http.post(this.utils.config+"/netmall/app/person/api/getPersonCenterData?user_id="+this.userId).then((data) => {
                         this.userName = data.data.result.tbMnUser.userName;
                         this.userCode = data.data.result.tbMnUser.inviteCode;
                         this.userAvater = data.data.result.tbMnUser.avater;
                    })
                    this.$http.post(this.utils.config+"/netmall/app/person/api/getUserGradeData?user_id="+this.userId).then((data) => {
                         if(data.data.success){
                              this.inivate_number = data.data.result.inivate_number;
                              this.vipName = data.data.result.tbMnUser.vipName;
                              this.profit = data.data.result.profit;
                              var list = data.data.result.tbUserVipList;
                              for(let i=0;i<list.length;i++){
                                   if(this.vipName == list[i].vipName){
                                        this.inviteNumber = list[i+1].inviteNumber;
                                        this.inviteProfit = list[i+1].inviteProfit;
                                   }
                              }
                         }
                    })
                    
               },
              invatation(){
                   this.show = true;
                   this.qrcode();
              },
              //  生成二维码
               qrcode () {
                    document.getElementById("qrcode").innerHTML = "";
                    let that = this;
                    let qrcode = new QRCode('qrcode', {
                         width: 80,
                         height: 80,        // 高度
                         text: 'http://www.taojinke.top/shopIndex/#/registerOut/'+that.userCode,   // 二维码内容
                         // render: 'canvas' ,   // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
                         // background: '#f0f',   // 背景色
                         // foreground: '#ff0'    // 前景色
                    })                
                    that.toImage();
               },
               //保存到本地
               saveImg(){
                    var setTim1 = setInterval(()=>{
                         if(this.htmlUrl){
                         plus.gallery.save(            
                              this.htmlUrl,            
                              function () {                
                                   Toast("保存成功");              
                              },            
                              function () {                
                                   Toast("保存失败");               
                              }            
                         );  
                         clearInterval(setTim1);
                         }
                    },200)
               },
               //微信分享
               wechatFen(num,str){
                    var that = this;
                    that.shareShow = true;
                    that.showLoading = true;
                    // that.$http.get(that.utils.config+"/netmall/app/person/api/integralTask?user_id="+that.userId+"&taskName=分享商品").then((data) => {
                    // })
                    var setTim2 = setInterval(()=>{
                         if(that.htmlUrl){
                         // let msg = {  
                         //     pictures: [that.htmlUrl],   // pictures 参数为数组  
                         //     type:'image'  
                         // };
                         // plus.share.sendWithSystem(  
                         //     msg,  
                         //     function(e) {  
                         //         that.showLoading = false;
                         //         Toast('分享成功') 
                         //     },  
                         //     function(e) {  
                         //         that.showLoading = false;
                         //         Toast('分享失败') 
                         //     }  
                         // );
                         plus.share.getServices(function(e) {
                              that.shareData = e;　　　　　　　　//这个回调函数的参数 e 就包含了 所有对象的数组
                         　　　　//在这个数组里 找到属于微信的对象 循环匹配查找
                         　　for(var i in e){　　　　　　　　
                              　　if(str == e[i].id){
                                   　　that.sharewx = e[i]　　//保存到变量里 （之后即可使用该对象发起分享）
                              　　}
                         　　}
                              if(!that.sharewx.authenticated){
                                   s.authorize(()=>{
                                        Toast("认证完成！");
                                   }, function(e){
                                        Toast("未进行认证");
                                   }, {
                                        "appid": "ww261d9795b7ae9c87"
                                   });
                              }
                              var typeStr;
                              if(num == 0){
                                   typeStr='WXSceneSession';
                              }
                              if(num == 1){
                                   typeStr='WXSceneTimeline';
                              }
                              let msg = {
                                   type: 'image',　　//分享的内容的类型 
                                   title: '淘金客',
                                   pictures: [that.htmlUrl],
                                   extra:{scene:typeStr} // 'WXSceneSession'分享给好友，'WXSceneTimeline'分享到朋友圈
                         　　}
                              setTimeout(()=>{
                                   that.showLoading = false;
                              },1000)
                         　　that.sharewx.send(msg, function() {
                              　　Toast('分享成功')
                         　　},function(error) {
                              　　 Toast('分享失败')
                         　　})   
                         　　})
                         clearInterval(setTim2);
                         }
                    },200)
               },
               // 页面元素转图片
               toImage () {                
                         var that = this;
                    setTimeout(()=>{
                         // 第一个参数是需要生成截图的元素,第二个是自己需要配置的参数,宽高等
                         // window.pageYOffset = 0;
                         // document.documentElement.scrollTop = 0
                         // document.body.scrollTop = 0
                         html2canvas(that.$refs.imageTofiles, {
                              scrollY: 0, 
                              scrollX: 0,
                              backgroundColor: null,
                    　　　　   useCORS: true // 如果截图的内容里有图片,可能会有跨域的情况,加上这个参数,解决文件跨域问题
                         }).then((canvas) => {
                         let url = canvas.toDataURL('image/png');
                         let arr = url.split(',');
                         let mime = arr[0].match(/:(.*?);/)[1];
                         let bytes = atob(arr[1]); // 解码base64
                         let n = bytes.length
                         let ia = new Uint8Array(n);
                         while (n--) {
                              ia[n] = bytes.charCodeAt(n);
                         }
                         var fileVal = new File([ia], "friendFen.png", { type: mime });
                         let params = new FormData();
                         params.append('file',fileVal);
                         let config = { headers: { //添加请求头
                              'Content-Type': 'multipart/form-data' } }
                         this.$http.post(this.utils.config+"/netmall/app/person/api/upload",params,config).then((data) => {
                              if(data.data.success){
                                   that.htmlUrl = data.data.message;
                              }
                         })
                         })
                    }, 1000)
               },
         }
    }
</script>

<style scoped>
 .grade-box{
      min-height: 100%;
      width: 100%;
      background: rgba(255,255,255,1);

 }
     .grade-list{
          width: 100%;
          height:44px;
          background:rgba(255,248,217,1);
          border:1px solid rgba(249,222,113,1);
          box-shadow:0px 0px 0px rgba(255,198,0,1);
          opacity:1;
          border-radius:10px 10px 0px 0px;
          padding-left: 11px;
     }
 .grade-list img{
      display: inline-block;
      margin-top:8px;
      width:30px;
      height:30px;
 }
     h6{
          font-size:12px;
          font-family:PingFang SC;
          font-weight:400;
          line-height:44px;
          color:rgba(51,51,51,1);
          float: left;
     }
 .grade-list span{
      font-size:16px;
      font-family:PingFang SC;
      font-weight:400;
      color:rgba(255,207,49,1);
      line-height:44px;
 }
 .grade-list-li li {
     width: 100%;
      display: flex;
      justify-content: space-between;
      border:1px solid rgba(235,235,235,1);
      font-size:11px;
     font-family:PingFang SC;
     font-weight:300;
     color:rgba(80,80,80,1);
     padding-left: 5px;
 }
 .grade-list-li li span{
     border-right:1px solid rgba(235,235,235,1);
     display: inline-block;
     padding:5px 0;
 }
 .grade-list-li li span:nth-child(1){
      font-weight:400;
      color:rgba(255,207,49,1);
 }
     /* .grade-list-li{
          width: 100%;
          height:132px;
          border:1px solid rgba(235,235,235,1);
          border-radius:0px 0px 10px 10px;
          display: flex;
          flex-wrap: wrap;
     } */
     /* .grade-list-li li{
          width: 33.3333333%;
          height: 30px;
          border: 1px solid rgba(235,235,235,1);
          justify-content:space-between;
          border-right:none ;
          border-bottom: none;
          line-height: 32px;
          font-size:11px;
          font-family:PingFang SC;
          font-weight:300;
          color:rgba(80,80,80,1);
          padding-left: 11px;
     }
     .grade-list-li li:nth-child(6n),.grade-list-li li:nth-child(8n),.grade-list-li li:nth-child(5),.grade-list-li li:nth-child(9),,.grade-list-li li:nth-child(11){
          font-size:12px;
          font-family:PingFang SC;
          font-weight:400;
          color:rgba(51,51,51,1);
     }
 .grade-list-li li:nth-child(4){
      font-weight:400;
      color:rgba(255,207,49,1);
 }
 .grade-list-li li:nth-child(4) img{
      display: inline-block;
      margin-top: 9px;
      width: 14px;
      height: 12px;
 }
 .grade-list-li li:nth-child(7){
       font-weight:400;
       color:rgba(255,207,49,1);
  }
 .grade-list-li li:nth-child(7) img{
      display: inline-block;
      margin-top: 8px;
     width: 14px;
      height: 14px;
 }
 .grade-list-li li:nth-child(10){
      color:rgba(254,155,26,1);
 }
 .grade-list-li li:nth-child(10) img{
      display: inline-block;
      margin-top: 8px;
      width: 15px;
      height: 15px;
 } */
     .grade-status{
          padding-left: 8px;
          margin-top: 24px;
          font-size:12px;
          font-family:PingFang SC;
          font-weight:400;
          line-height:12px;
          color:rgba(51,51,51,1);
     }
     .grade-invatation{
          margin-top: 10px;
          width: 100%;
          height:42px;
          background:rgba(255,233,239,0.77);
          opacity:1;
          border-radius:10px;
          font-size:11px;
          font-family:PingFang SC;
          font-weight:400;
          line-height:42px;
          color:rgba(51,51,51,1);
          padding-left: 10px;
          display: flex;
           justify-content: space-between;
     }
 .grade-invatation span{
      font-size:14px;
      font-family:PingFang SC;
      font-weight:600;
      color:rgba(255,90,160,1);
 }
     .grade-progress{
          margin-top: 16px;
          width:169px;
          height:10px;
          background:rgba(233,233,233,1);
          border-radius:10px;
          margin-right: 10px;
     }
 .grade-invatationm{
      margin-top: 10px;
      width: 100%;
      height:42px;
      background:rgba(255,248,217,1);
      opacity:1;
      border-radius:10px;
      font-size:11px;
      font-family:PingFang SC;
      font-weight:400;
      line-height:42px;
      color:rgba(51,51,51,1);
      padding-left: 10px;
      display: flex;
      justify-content: space-between;
 }
 .grade-invatationm span{
      font-size:14px;
      font-family:PingFang SC;
      font-weight:600;
      color:rgba(255,209,63,1);
 }
 h2{
      margin-top: 10px;
      margin-left: 10px;
      font-size:11px;
      font-family:PingFang SC;
      font-weight:300;
      line-height:12px;
      color:rgba(242,61,61,1);
 }
 .grade-btn{
      position: fixed;
      bottom: 18px;
      height:45px;
      right: 0;
      left: 0;
      font-size:16px;
      background:linear-gradient(90deg,rgba(255,90,160,1) 0%,rgba(255,46,103,1) 100%);
      opacity:1;
      border-radius:4px;
      font-family:PingFang SC;
      font-weight:400;
      line-height:45px;
      color:rgba(255,255,255,1);
      text-align: center;
      margin: 0 15px;
 }
 .invitation-shear{
        text-align: center;
        display: flex;
        justify-content: space-around;
        width: 100%;
        font-size:12px;
        font-family:SourceHanSansSC-Regular,SourceHanSansSC;
        font-weight:400;
        color:rgba(136,136,136,1);
        line-height:18px;
    }
    .invitation-shear li{
        margin-top: 32px;
    }
    .invitation-shear li img{
        width: 38px;
        height: 38px;
        border-radius: 50%;
    }
    .invitation-shear li p{
        margin-top: 6px;
    }
    .haibao{
        position: absolute;
        top: 8%;
        z-index: 88;
        left: 0;
        right: 0;
        margin: auto;
        width: 286px;
        height: 500px;
        background: #39a9ed;
        border-radius: 10px;
    }
    h1{
        font-size:14px;
        font-family:SourceHanSansSC-Normal,SourceHanSansSC;
        font-weight:400;
        color:rgba(51,51,51,1);
        line-height:20px;
        margin: 25px auto 0;
        width: 100%;
        text-align: center;
    }
</style>
